<!DOCTYPE html>
<html lang="en">
<head>
    <title>地图导航</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style rel="stylesheet" type="text/css">
        /*去除正文区域的间距*/
        body{margin:0 auto; padding:0}

        /*地图加载区域样式*/
        #container{
            width:100%;
            height:100vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!--地图容器-->
    <div id="container"></div>

    <!--设置全局脚本变量：地图使用的密钥-->
    <script type="text/javascript">
        //原型链：在当前web打开网页的窗口对象window中，添加变量
        window._AMapSecurityConfig = {
          //安全密钥
          securityJsCode: "24f112f022ac858aae8fd214dd14c3bc",
        };
    </script>

    <!--获取整个地图的脚本:
        直接访问官网下载到本地的，下载时，提供key
    -->
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=2d6b09223c66ca9602900e0b4d9fc57a">
    </script>

    <!--初始化地图-->
    <script type="text/javascript">
        //初始化地图，缩放比例
        var zoom = 18

        //创建地图对象，设置默认的经纬度
        var map = new AMap.Map(
            "container",  //显示容器的id值：上面的那个地图容器div
            {
             zoom: zoom,  //默认的初始化显示比例
             center: [104.065735, 30.659462]  //中心点
          }
        );

        //定位方法：
        //方法负责进行具体内容的设置与操作，由鸿蒙应用负责调用
        function setLocation(lng,lat){
            //第一步：设置地图中心点
            map.setZoomAndCenter(zoom,[lng,lat])

            //第二步：设置中心点的Marker标记
            var marker = new AMap.Marker({
                map: map,  //基于哪个地图对象
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position: [lng,lat]  //经纬度
            })
            //添加到地图中
            map.add(marker)

            //第三步：为地图添加插件功能
            //自动搜索且标记出周围的核心地标
            map.plugin(
                ['AMap.PlaceSearch'],       //插件-搜索功能
                function(){                 //具体插件执行的操作
                    //搜索参数配置对象
                    var PlaceSearchOptions = {
                        map: map,  //地图位置
                        pageSize: 4,  //搜索出的结果，默认10个
                        pageIndex: 1,  //显示第几页
                        extensions: 'base'  //返回的详情-只要基本信息
                    };

                    //创建插件-搜索功能类-功能实例
                    var MSearch = new AMap.PlaceSearch(PlaceSearchOptions);

                    //设置监听：(具体对象操作，'完成状态'，回调)-没有执行
                    AMap.Event.AddListener( MSearch, "complete", (res)=>{


                        //将搜索到的结果，通过事件调用
                        //作为参数，传递到鸿蒙应用中
                        window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    });

                    //正式执行搜索，在指定的坐标周围
                    MSearch.searchNearBy('停车场', [lng,lat])
                }
            );
        };

        //当页面加载完毕时
        window.onload = function(){
            //调用鸿蒙端Proxy代理过来的指定方法
            window.swift.setCurrentLocation()
        }

    </script>


</body>
</html>